$(function () {
    // 获取本地存储中的内容
    // var arr = JSON.parse(localStorage.getItem("aaa")) || [];
    var id = $.cookie("id");
    // 获取元素
    var $allCheck = $("#allCheck");
    var $tbody = $("#tbody");
    var $allCount = $("#allCount");
    var $bill = $("#bill");
    var isChecked = $($allCheck).is(":checked");
    var arr = [];
    var count = 0;
    // 危 以下为套娃 总之先获取用户购物车数据
    // 更新 不套娃了 至少明着不套娃了
    $.ajax({
        url: "/php/cart.php",
        data: {
            id
        },
        type: "post",
        // 直接给异步关了，就可以给全局变量赋值  不用套娃了
        async: false,
        dataType: "json",
        success(data) {
            arr = data.data;
            console.log(arr);

        }
    });



    checkAll();
    render();
    // 渲染
    function render() {
        // 根据购物车数据获取物品数据
        var str = "";
        arr.forEach(value => {
            value.isChecked = isChecked;
            // console.log(value);
            $.ajax({
                url: "/php/getGoodInfo.php",
                data: {
                    id: value.slug
                },
                type: "get",
                async: false,
                dataType: "json",
                success(data) {
                    // 根据货物数据渲染tr
                    var logo = JSON.parse(data.data.family);
                    value.iconUrl = logo.iconUrl;
                    try {
                        var price = JSON.parse(data.data.products)[0].price.price.raw;
                    } catch (e) {
                        console.log(e);
                        var price = 0;
                    }
                    let count = price * value.num;
                    value.price = price;
                    value.count = count;
                    value.title = data.data.title;
                    str += `
                <tr>
                <td><input data-goods-id="${value.slug}" type="checkbox" ${value.isChecked ? "checked" : ""}></td>
                <td id="name"><a href="./detail.html#${value.slug}" target= "_blank"><img id="logo" src="${value.iconUrl}" alt="">${data.data.title}</a></td>
                <td>￥${price}</td>
                <td>
                    <div class="number">
                        <div class="btnbox" data-goods-id="${value.slug}">
                        <button class="btn btn-primary increase"><i class="glyphicon glyphicon-plus" ></i></button>
                        <button class="btn btn-primary decrease"><i class="glyphicon glyphicon-minus"></i></button>
                        </div>
                        <span>${value.num}</span>
                    </div>
                </td>
                <td>${data.data.description}</td>
                <td>￥${count}</td>
                <td data-goods-id="${value.slug}">
                <a class="del" href="#">删除</a>
                </td>
            </tr>
            `
                }
            });

        });
        $tbody.html(str);
    }
    // 点击全选
    function checkAll() {
        // 获取选中状态
        isChecked = $($allCheck).is(":checked");
        // 修改isChecked属性
        arr.forEach(value => {
            value.isChecked = isChecked
        })
        render();
        compute();
    }
    $allCheck.on("click", function () {
        checkAll();
    })
    // 删除
    $tbody.on("click", ".del", function () {
        console.log("点击到删除了");
        // 获取点击到的这个id
        var delid = $(this).parent().data("goods-id");
        // console.log(delid);
        // 删除数组中对应的的数据
        // 根据id找到它在数组中的哪个位置 
        var isDel = confirm("确定删除？");
        if (!isDel) {
            return;
        }
        var idx = arr.findIndex(value => {
            return value.slug === delid;
        })
        // console.log(idx,arr) ;
        // 再splice
        arr.splice(idx, 1);
        // console.log(delid);
        // 再将内容放回本地存储
        // localStorage.setItem("aaa", JSON.stringify(arr));
        $.ajax({
            url: "/php/docart.php",
            data: {
                id: delid,
                do: "del",
                userID: $.cookie("id")
            },
            type: "get",
            dataType: "json",
            success(data) {
                console.log("删除！");
            }
        });
        render();
        compute();
    });

    // 套娃的极致，就是每点一下都套娃
    //增加
    $tbody.on("click", ".increase", function () {
        var addid = $(this).parent().data("goods-id");
        console.log(addid);
        var goods = arr.find(value => {
            return value.slug === addid;
        })
        goods.num++;
        console.log(goods.num);
        $.ajax({
            url: "/php/docart.php",
            data: {
                id: addid,
                do: "increase",
                num: goods.num,
                userID: $.cookie("id")
            },
            type: "get",
            dataType: "json",
            success(data) {
                console.log("增加");
            }
        });
        render();
        compute();
        // localStorage.setItem("aaa", JSON.stringify(arr));
    });
    //减少
    $tbody.on("click", ".decrease", function () {
        var cutid = $(this).parent().data("goods-id");
        var goods = arr.find(value => {
            return value.slug === cutid;
        })
        // console.log(arr,goods);
        if (goods.num <= 1) {
            alert("不能再减少了");
            return;
        }
        goods.num--;
        $.ajax({
            url: "/php/docart.php",
            data: {
                id: cutid,
                do: "decrease",
                num: goods.num,
                userID: $.cookie("id")
            },
            type: "get",
            dataType: "json",
            success(data) {
                console.log("减少");
            }
        });
        render();
        compute();
        // localStorage.setItem("aaa", JSON.stringify(arr));
    });

    // 全选按钮状态 双向绑定
    $tbody.on("click", "input", function () {
        // 获取当前的元素的选中状态
        let inputChecked = $(this).is(":checked");
        // 更改当前选中的元素所对应的数据的isChecked属性
        let id = $(this).data("goods-id");
        console.log(id)
        // 根据id找到它
        var goods = arr.find(value => {
            return value.slug === id;
        })
        // console.log(goods);
        // 更改它的选中属性
        goods.isChecked = inputChecked;
        // 计算价格
        compute();
        // 影响全选状态
        renderAllCheck();

    })

    // 定义计算价格函数
    function compute() {
        count = 0;
        for (var i = 0; i < arr.length; i++) {
            if (arr[i].isChecked) {
                count += arr[i].count;
            }
        }
        $allCount.html(count);
    }

    // 定义全选按钮的渲染函数
    function renderAllCheck() {
        // 循环arr数组 判定数组中的每一个对象是否都有isChecked为true 
        var isAllChecked = arr.every(function (value) {
            return value.isChecked;
        });
        // console.log(isAllChecked)
        // console.log($allCheck[0])
        // attr方法在操作input的checked时 不如 prop好用
        $allCheck.prop("checked", isAllChecked)
    }

    // 结算
    // 暂定把checked的商品名、数量、单价、总价、用户ID写一个json给数据库bill表
    // 自动生成一个订单号当主键,

    // 不想写数据库和PHP的懒狗直接把用户id和总价用查询串发过去交钱

    // $bill.on("click",function(){
    //     location.href = "./bill.html?id="+id+"&count="+count;
    // })

    // 不当懒狗辣 JOJO！

    // 懒狗2.0 改成当前购物车信息直接给本地存储，然后就跳转，到时候提交了订单再删掉
    $bill.on("click", function () {
        console.log(arr);
        if(!arr){
            return;
        }
        var billArr = [];
        arr.forEach(value=>{
            if(value.isChecked){
                billArr.push(value);
            }
        })
        console.log(billArr);
        localStorage.setItem("bill", JSON.stringify(billArr));
        let jump = confirm("确认生成订单？");
        if(!jump){
            return;
        }else{
            location.href = "./bill.html";
        }
    })
});